<template>
  <div class="bg-white rounded-lg overflow-x-auto">
    <!-- 移除了 shadow 类 -->
    <table class="w-full">
      <thead class="bg-gray-50">
        <tr class="h-12">
          <th
            class="w-[50px] px-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            状态
          </th>
          <th
            class="w-[500px] px-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            题目
          </th>
          <th
            class="w-[120px] px-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            通过率
          </th>
          <th
            class="w-[100px] px-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
          >
            难度
          </th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
        <tr
          v-for="(problem, index) in problems"
          :key="problem.id"
          :class="[
            index % 2 === 0 ? 'bg-white h-12' : 'bg-[#F7F8FA] h-12',
            'hover:bg-gray-50 cursor-pointer',
          ]"
          @click="handleProblemClick(problem)"
        >
          <td class="w-[50px] px-2 text-center whitespace-nowrap">
            <CheckCircle2
              v-if="problem.status === 'done'"
              class="h-4 w-4 text-green-500 mx-auto"
            />
            <Circle v-else class="h-4 w-4 text-gray-300 mx-auto" />
          </td>
          <td class="w-[500px] px-2 whitespace-nowrap text-gray-900 font-medium">
            {{ problem.title }}
          </td>
          <td class="w-[120px] px-2 whitespace-nowrap text-gray-900">
            {{ problem.passRate }}
          </td>
          <td class="w-[100px] px-2 whitespace-nowrap">
            <span
              :class="{
                'text-green-600 font-medium': problem.difficulty === '简单',
                'text-yellow-600 font-medium': problem.difficulty === '中等',
                'text-red-600 font-medium': problem.difficulty === '困难',
              }"
              >{{ problem.difficulty }}</span
            >
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { CheckCircle2, Circle } from "lucide-vue-next";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  problems: {
    type: Array,
    required: true,
  },
});

// 简化点击处理函数
const handleProblemClick = (problem) => {
  router.push({
    name: "SqlProblemDetail",
    params: { id: problem.id },
  });
};
</script>

<style scoped>
table {
  border-collapse: separate;
  border-spacing: 0;
}

thead th:first-child {
  border-top-left-radius: 0.5rem;
}

thead th:last-child {
  border-top-right-radius: 0.5rem;
}

tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}

tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}
</style>
